<template>
  <div class="list-table">
    <el-row>
      <el-col v-loading="loadChart" :span="8" style="min-height:300px;position: relative;">
        <div class="area-header">
          <span class="area-header-title">{{ $t('投资类型监控') }}</span>
        </div>
        <el-button type="text" icon="el-icon-edit" size="small" @click="clickInvestRatio">{{ $t("监控投资比例") }}</el-button>
        <Empty :data="chartData.datas" style="min-height:320px;">
          <pieChart v-if="chartData.datas.length > 0" :chart-data="chartData" @xData="handleTooltipClick" />
        </Empty>
        <!--<map-view />-->
      </el-col>
      <el-col :span="16">
        <div class="area-header">
          <span class="area-header-title">{{ $t('投资项目详情') }}</span>
        </div>
        <el-table v-loading="loading" :data="tableList" border>
          <el-table-column :label="$t('项目名称')" show-overflow-tooltip align="center" prop="dealName">
            <template slot-scope="scope">
              <router-link
                target="_blank"
                :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.id,companyId:scope.row.companyId,dealType: scope.row.dealType}}"
                class="link_a"
              >{{ scope.row.dealName }}</router-link>
            </template>
          </el-table-column>
          <el-table-column :label="$t('投资类型')" align="center" prop="dealType" show-overflow-tooltip width="110" :formatter="dealTypeFormat" />
          <el-table-column :label="$t('负责人')" align="center" prop="personCharge.nickName" show-overflow-tooltip width="110" />
          <el-table-column :label="$t('投资金额') + $t('金额单位')" align="center" prop="payment" show-overflow-tooltip width="110">
            <template slot-scope="scope">
              <span class="money-text">{{ moneyFormat(scope.row.payment, 'w') }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="params.pageNum"
      :limit.sync="params.pageSize"
      @pagination="pageData"
    />
    <!-- 添加或修改项目现金流对话框 -->
    <el-dialog :title="$t(investTitle)" :visible.sync="investFormOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogFormBox" append-to-body>
      <DealInvestMonitor ref="dealInvestMonitor" />
    </el-dialog>
  </div>
</template>

<script>
    import { findDealTypeGroup, listDealBase } from '@/api/base/deal/dealBase'
    import DealInvestMonitor from '@/views/deal/investmonitor/dealInvestMonitorForm.vue'
    import pieChart from '@/views/chart/pieChart.vue'
    export default {
      components: {
        pieChart,
        DealInvestMonitor
      },
      data() {
          return {
            // echarts 数据
            chartData: {},
            // 投资项目list
            tableList: [],
            // 总条数
            total: 0,
            // 查询参数
            params: {
              pageNum: 1,
              pageSize: 10,
              // 项目投资类型
              dealType: undefined
            },
            // 记录上一次点击事件传的参数值
            previousVal: undefined,
            // 数据加载
            loading: false,
            // echarts 加载
            loadChart: false,
            // 投资类型监控formOpen
            investFormOpen: false,
            // 投资类型监控title
            investTitle: this.$t('投资类型监控'),
            // 投资类型字典
            dealTypeOptions: []
          }
      },
      created() {
        this.getDicts('deal_type').then(response => {
          this.dealTypeOptions = response.data
        })
        this.getList()
        this.pageData()
      },
      mounted() {
        this.$bus.$emit('async_done')
      },
      methods: {
        // 投资类型字典
        dealTypeFormat(row) {
          return this.selectDictLabel(this.dealTypeOptions, row.dealType)
        },
        getList() {
          this.loadChart = true
          findDealTypeGroup().then(res => {
            if (res.code === 200 && res.data.length > 0) {
              this.chartData = {
                center: ['50%', '40%'],
                valueFormatter: true,
                formatter: '{b}',
                datas: res.data
              }
              this.chartData.datas = this.chartData.datas.map(ele => { return { value: ele.amount, type: ele.type, name: ele.name, ratio: ele.ratio } })
              this.loadChart = false
            } else {
              this.loadChart = false
              this.chartData = {}
            }
          }).catch(() => {
            this.loadChart = false
            this.chartData = {}
          })
        },
        // 点击饼图根据点击的类型查询
        handleTooltipClick(val) {
          this.loading = true
          if (val) {
            this.params.dealType = val.type
          }
          if (this.previousVal === this.params.dealType) {
            this.params.dealType = undefined
          }
          this.pageData()
          this.previousVal = this.params.dealType
        },
        // 点击分页查询
        pageData() {
          listDealBase(this.params).then(response => {
            this.tableList = response.rows
            this.total = response.total
            this.loading = false
          })
        },
        // 点击监控投资比例
        clickInvestRatio() {
          this.investFormOpen = true
        }
      }
    }
</script>

<style scoped>
.dialogFormBox{
  width: 40% !important;
  height: 65%;
  overflow: hidden;
  top: 5% !important;
  margin-top: unset!important;
}
.dialogFormBox .el-dialog__body {
  height: calc(100% - 50px);
}
.dialogFormBox .el-dialog__body>div{
  position: relative;
  height: 100%;
  width: 100%;
}
.dialogFormBox .el-dialog__body>div .el-form{
  height: calc(100% - 50px);
  overflow: auto;
  position: absolute;
  top: 0;
  bottom: 70px;
  right: -20px;
  padding-right: 20px;
  left: 0;
}
.dialogFormBox .el-dialog__body>div .dialog-footer{
  position: absolute;
  bottom: 0;
  right: 0;
}

</style>

